<template>
    <ph-th :class="cns" @click="checkAll(!checked)">
        <icon :icon="icon" :hover='true'/>
    </ph-th>
</template>
<script lang="ts">
import { computed, defineComponent, inject } from 'vue'
import Icon from '../base/icon.vue'
import PhTh from './th.vue'
export default defineComponent({
    components:{Icon,PhTh},
    props:{
        checked:{
            type:Boolean
        }
    },
    setup(props) {
        const checkAll = inject<(k:boolean)=>void>('toggleTbCheckAll')
        
        const icon = computed(()=>{
            return props.checked?'check-square':'square-o'
        })
        const cns = computed(()=>{
            return {
                'ph-th-check':true,
                'ph-th-checked':props.checked
            }
        })
        return {icon,cns,checkAll}
    },
})
</script>
<style lang="scss" scoped>
.ph-th{
    &-check{
        overflow: visible;
    }
    &-checked{
        color: var(--ph-theme);
    }
}
</style>
